<template>
	<view class="commonBox">
		<uni-popup ref="popup" type="center" :maskClick="isMaskClose">
			<view class="popup borderBox">
				<slot></slot>
				<view v-if="title" class="title">
					{{ title }}
				</view>
				<view class="content" v-if="content">
					{{ content }}
				</view>
				<view class="btns flex f-x-c">
					<view class="cancel" v-if="isShowCancel" @click.stop="$emit('cancel')">{{ cancel }}</view>
					<view class="confirm" v-if="isShowConfirm" @click.stop="$emit('confirm')">{{ confirm }}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * commonBox 询问框
	 * @description 询问框
	 * @property {String} title 询问标题(默认值: "")。
	 * @property {String} cancel 取消提示文字(默认值: 取消)。
	 * @property {String} confirm 确认提示文字(默认值: "确认")。
	 * @property {String} content 询问内容(默认值: "")。
	 * @property {Boolean} isMaskClose 是否可以点击遮罩层关闭(默认值: true)。
	 * @property {Boolean} isShowCancel 是否显示取消按钮(默认值: true)。
	 * @property {Boolean} isShowConfirm 是否显示确认按钮(默认值: true)。
	 * @example <commonBox title="交易提醒" content="请问您是否同意进行交易呢？" cancel="不同意" confirm="同意"></commonBox>
	 */
	export default {
		name: 'commonBox',
		props: {
			title: {
				default: '',
			},
			cancel: {
				default: '取消',
			},
			confirm: {
				default: '确认',
			},
			content: {
				default: '',
			},
			isMaskClose: {
				default: true,
			},
			isShowCancel: {
				default: true
			},
			isShowConfirm: {
				default: true
			}
		},
		data() {
			return {};
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
		},
	};
</script>

<style lang="less" scoped>
	.commonBox {
		position: fixed;
		z-index: 999;

		.popup {
			width: 590rpx;
			background-color: #fff;
			padding: 59rpx 50rpx 40rpx;
			border-radius: 10rpx;

			.title,
			.content {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				text-align: center;
				line-height: 50rpx;
			}

			.btns {
				margin-top: 39rpx;
				display: flex;

				>view {
					width: 230rpx;
					height: 76rpx;
					border-radius: 38rpx;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 76rpx;
					text-align: center;
				}

				.cancel {
					margin-right: 30rpx;
					color: #333333;
					background: #f0f0f0;
				}

				.confirm {
					color: #fff;
					background: linear-gradient(90deg, #1395F3 0%, #169DFF 100%);
				}
			}
		}
	}
</style>
